Chrome Extension 07 – 不確定能不能用的 vue 採雷..2 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2019 iT 邦幫忙鐵人賽

DAY 7

Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列第 7 篇

Chrome Extension 07 – 不確定能不能用的 vue 採雷..2

2019鐵人賽

givemin5

2018-10-22 22:40:02

1430 瀏覽

分享至

續昨天的研究，修正 src 底下的檔案
index.js 修正成

  import Vue from 'vue'
  import App from './App.vue'
  
  new Vue({
    el: '#app',
    render: h => h(App)
  })

及在 src 目錄底下，增加 app.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello vue !'
    }
  }
}
</script>

執行 webpack 建置後，在 dist 直接建立 chrome extenion 相關檔案，測試是否能使用 vue

manifest.json

{
    "manifest_version" : 2, 
    "name" : "Hello Vue", 
    "version" : "1.0",
    "description" : "A hello world for vue",
    "icons":{ 
        "128" : "icon128.png",
        "48"  : "icon48.png",
        "16"  : "icon16.png"
    },
    "browser_action" :{ 
        "default_icon" : "icon16.png",
        "default_popup" : "popup.html"
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

popup.html 部分

<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <title>Title Page</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript"  src="bundle.js"></script>
    </body>
</html>

資料已經可以正常顯示到 Chrome Extension 的 popup 頁面上(灑花..